﻿<div class="data @Class" style="@Style" id="@Id">
    <header class="header">
        <header>
            <i class="light" style="background-color: #fd6458;"></i>
            <i class="light" style="background-color: #ffbf2b; margin-left: 8px;"></i>
            <i class="light" style="background-color: #24cc3d; margin-left: 8px;"></i>
        </header>
        <nav class="navbar">
            @Extra
        </nav>
    </header>
    <main class="context @ContextClass" style="@ContextStyle">
        @Context
    </main>
</div>

@code {
    [Parameter] public RenderFragment? Extra { get; set; }

    [Parameter] public RenderFragment? Context { get; set; }

    [Parameter] public string? Class { get; set; }

    [Parameter] public string? Style { get; set; }

    [Parameter] public string? ContextClass { get; set; }

    [Parameter] public string? ContextStyle { get; set; }
    
    [Parameter] public string? Id { get; set; }
}

<style>
    .data {
        border-radius: 10px;
        background-color: #fff;
    }
</style>